<template>
  <div class="user-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>用户管理</span>
          <el-button type="primary" @click="handleAddUser">
            添加用户
          </el-button>
        </div>
      </template>
      <Table ref="tableRef" :params="{}" :api="getUsers">
        <template #columns>
          <el-table-column prop="id" label="ID" min-width="80" />
          <el-table-column prop="username" label="用户名" min-width="120" show-overflow-tooltip />
          <el-table-column prop="email" label="邮箱" min-width="150" show-overflow-tooltip />
          <el-table-column prop="phone" label="电话" min-width="120" show-overflow-tooltip />
          <el-table-column prop="role" label="角色" min-width="100">
            <template #default="{ row }">
              <el-tag :type="row.role === 'admin' ? 'danger' : 'info'">
                {{ row.role === "admin" ? "管理员" : "普通用户" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
                {{ row.status === "enabled" ? "启用" : "禁用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="180" show-overflow-tooltip>
            <template #default="{ row }">
              {{ formatTime(row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="信息更新时间" min-width="180" show-overflow-tooltip>
            <template #default="{ row }">
              {{ formatTime(row.updatedAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template #default="{ row }">
              <el-button-group>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleEditUser(row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click="handleDeleteUser(row)"
                >
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </template>
      </Table>
    </el-card>

    <!-- 用户表单对话框 -->
    <modal
      ref="modalRef"
      :title="dialogType === 'add' ? '添加用户' : '编辑用户'"
      width="500px"
      :path="'/views/admin/user/edit.vue'"
      @success="tableRef?.fetchData()"
    >
    </modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UserInfo } from "@/types";
import Table from "@/components/table/index.vue";
import { getUsers, deleteUser } from "@/api/user";
import modal from "@/components/modal/index.vue";
import dayjs from "dayjs";
const dialogType = ref<"add" | "edit">("add");
const formData = ref<UserInfo>();
provide("dialogType", dialogType);
provide("formData", formData);
const tableRef = ref<InstanceType<typeof Table> | null>(null);
const modalRef = ref<InstanceType<typeof modal> | null>(null);
const formatTime = (time: string) => {
  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
};
const handleAddUser = () => {
  dialogType.value = "add";
  formData.value = undefined;
  modalRef.value?.open();
};

const handleEditUser = (row: UserInfo) => {
  dialogType.value = "edit";
  formData.value = row;
  modalRef.value?.open();
};

const handleDeleteUser = (row: UserInfo) => {
  ElMessageBox.confirm("确定要删除该用户吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deleteUser(row.id).then((res) => {
      // 这里应该调用删除API
      if (res) ElMessage.success("删除成功");
      tableRef.value?.fetchData();
    });
  });
};
</script>

<style scoped lang="scss">
.user-management {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
